<template>
  <view class="task-detail">
    <!-- 顶部导航栏 -->
    <view class="nav-bar">
      <view class="nav-bar-left" @click="goBack">
        <image class="back-icon" src="/static/Images/shop/Fanhui.png" mode="aspectFit"></image>
      </view>
      <view class="nav-bar-title">任务详情</view>
      <view class="nav-bar-right"></view>
    </view>
    
    <!-- 任务信息 -->
    <view class="task-info-card">
      <view class="task-header">
        <view class="task-type">
          <image class="type-icon" :src="getTypeIcon()" mode="aspectFit"></image>
          <text class="type-text">{{ getTypeText() }}</text>
        </view>
        <view class="task-status" :style="{color: getStatusColor(taskInfo.status)}">
          {{ getStatusText(taskInfo.status) }}
        </view>
      </view>
      
      <view class="task-title">{{ taskInfo.title }}</view>
      
      <view class="task-meta">
        <view class="meta-item">
          <text class="meta-label">发布时间：</text>
          <text class="meta-value">{{ taskInfo.createTime }}</text>
        </view>
        <view class="meta-item">
          <text class="meta-label">任务编号：</text>
          <text class="meta-value">{{ taskInfo.id }}</text>
        </view>
      </view>
      
      <view class="price-section">
        <text class="price-label">任务佣金</text>
        <text class="price-value">¥{{ taskInfo.price }}</text>
      </view>
    </view>
    
    <!-- 任务详情 -->
    <view class="detail-section">
      <view class="section-title">任务详情</view>
      <view class="detail-content">
        <text class="detail-text">{{ taskInfo.description }}</text>
        
        <view class="detail-images" v-if="taskInfo.images && taskInfo.images.length > 0">
          <image 
            v-for="(img, index) in taskInfo.images" 
            :key="index" 
            :src="img" 
            mode="widthFix" 
            class="detail-image"
            @click="previewImage(index)"
          ></image>
        </view>
        
        <view class="task-tags" v-if="taskInfo.tags && taskInfo.tags.length > 0">
          <text class="tag" v-for="(tag, index) in taskInfo.tags" :key="index">{{ tag }}</text>
        </view>
      </view>
    </view>
    
    <!-- 任务要求 -->
    <view class="requirements-section">
      <view class="section-title">任务要求</view>
      <view class="requirements-list">
        <view class="requirement-item" v-for="(req, index) in taskInfo.requirements" :key="index">
          <text class="requirement-num">{{ index + 1 }}</text>
          <text class="requirement-text">{{ req }}</text>
        </view>
      </view>
    </view>
    
    <!-- 发布者信息 -->
    <view class="publisher-section">
      <view class="section-title">发布者信息</view>
      <view class="publisher-info">
        <image class="publisher-avatar" :src="taskInfo.publisher.avatar" mode="aspectFill"></image>
        <view class="publisher-details">
          <text class="publisher-name">{{ taskInfo.publisher.name }}</text>
          <view class="publisher-rating">
            <text class="rating-label">信誉等级：</text>
            <view class="stars">
              <image 
                v-for="(star, index) in 5" 
                :key="index"
                class="star-icon" 
                :src="index < taskInfo.publisher.rating ? '/static/Images/user/Xinyu.png' : '/static/Images/user/Xinyu.png'" 
                mode="aspectFit"
                :style="{ opacity: index < taskInfo.publisher.rating ? 1 : 0.3 }"
              ></image>
            </view>
          </view>
        </view>
      </view>
    </view>
    
    <!-- 底部操作栏 -->
    <view class="bottom-bar">
      <view class="contact-btn" @click="contactPublisher">
        <image class="contact-icon" src="/static/Images/goods/Kefu.png" mode="aspectFit"></image>
        <text>联系发布者</text>
      </view>
      <view class="action-btn" v-if="showAcceptButton(taskInfo.status)" @click="acceptTask">
        立即接单
      </view>
      <view class="action-btn" v-else-if="showCompleteButton(taskInfo.status)" @click="completeTask">
        完成任务
      </view>
      <view class="action-btn disabled" v-else>
        {{ getActionButtonText(taskInfo.status) }}
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      id: null,
      type: '',
      taskInfo: {
        id: '1001',
        title: '示例任务标题 - 完成一个简单的调查问卷',
        description: '这是一个示例任务描述，详细说明了任务的内容、目标和完成方式。任务要求参与者完成一个关于消费习惯的在线调查问卷，问卷包含约20个问题，预计完成时间为10-15分钟。\n\n完成问卷后，需要截图问卷完成页面作为任务完成证明。',
        createTime: '2023-06-15 14:30',
        price: '50.00',
        status: 'pending',
        tags: ['问卷调查', '简单任务', '快速完成'],
        images: [
          '/static/Images/tesk/Gun-1.png',
          '/static/Images/tesk/Gun-1.png'
        ],
        requirements: [
          '年龄在18-45岁之间',
          '有网购经验',
          '能够提供真实、有效的反馈',
          '能在24小时内完成任务'
        ],
        publisher: {
          name: '任务发布者',
          avatar: '/static/Images/user/Touxiang.png',
          rating: 4
        }
      }
    }
  },
  onLoad(options) {
    if (options.id) {
      this.id = options.id;
      // 实际应用中，这里应该根据ID从服务器获取任务详情
    }
    
    if (options.type) {
      this.type = options.type;
    }
  },
  methods: {
    // 返回上一页
    goBack() {
      uni.navigateBack();
    },
    
    // 获取类型图标
    getTypeIcon() {
      switch(this.type) {
        case 'pending':
          return '/static/Images/tesk/Yibang.png';
        case 'processing':
          return '/static/Images/tesk/Process.png';
        case 'completed':
          return '/static/Images/tesk/Chakancheng.png';
        case 'guide':
          return '/static/Images/tesk/Gonglue.png';
        case 'rights':
          return '/static/Images/tesk/Quanyi.png';
        default:
          return '/static/Images/tesk/Yibang.png';
      }
    },
    
    // 获取类型文本
    getTypeText() {
      switch(this.type) {
        case 'pending':
          return '待办任务';
        case 'processing':
          return '进行中';
        case 'completed':
          return '已完成';
        case 'guide':
          return '攻略';
        case 'rights':
          return '权益';
        default:
          return '任务';
      }
    },
    
    // 获取状态文本
    getStatusText(status) {
      switch(status) {
        case 'pending':
          return '待接单';
        case 'processing':
          return '进行中';
        case 'completed':
          return '已完成';
        default:
          return '未知状态';
      }
    },
    
    // 获取状态颜色
    getStatusColor(status) {
      switch(status) {
        case 'pending':
          return '#FF9500';
        case 'processing':
          return '#007AFF';
        case 'completed':
          return '#4CD964';
        default:
          return '#999999';
      }
    },
    
    // 预览图片
    previewImage(index) {
      uni.previewImage({
        current: index,
        urls: this.taskInfo.images
      });
    },
    
    // 联系发布者
    contactPublisher() {
      uni.showToast({
        title: '正在连接...',
        icon: 'loading'
      });
      
      // 模拟联系操作
      setTimeout(() => {
        uni.hideToast();
        uni.showModal({
          title: '提示',
          content: '是否联系发布者？',
          success: (res) => {
            if (res.confirm) {
              // 实际应用中，这里可能会跳转到聊天页面或拨打电话
              uni.showToast({
                title: '已发送消息',
                icon: 'success'
              });
            }
          }
        });
      }, 1000);
    },
    
    // 接单
    acceptTask() {
      uni.showModal({
        title: '确认接单',
        content: '确定要接此任务吗？接单后需按要求完成任务。',
        success: (res) => {
          if (res.confirm) {
            // 执行接单操作
            this.taskInfo.status = 'processing';
            uni.showToast({
              title: '接单成功',
              icon: 'success'
            });
          }
        }
      });
    },
    
    // 完成任务
    completeTask() {
      uni.showModal({
        title: '确认完成',
        content: '确认已完成此任务？提交后将等待发布者确认。',
        success: (res) => {
          if (res.confirm) {
            // 执行完成操作
            this.taskInfo.status = 'completed';
            uni.showToast({
              title: '提交成功',
              icon: 'success'
            });
          }
        }
      });
    },
    
    // 是否显示接单按钮
    showAcceptButton(status) {
      return status === 'pending';
    },
    
    // 是否显示完成按钮
    showCompleteButton(status) {
      return status === 'processing';
    },
    
    // 获取操作按钮文本
    getActionButtonText(status) {
      if (status === 'completed') {
        return '已完成';
      } else {
        return '暂不可操作';
      }
    }
  }
}
</script>

<style scoped>
.task-detail {
  min-height: 100vh;
  background-color: #f5f5f5;
  padding-bottom: 120rpx; /* 为底部操作栏预留空间 */
}

/* 导航栏 */
.nav-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 90rpx;
  background-color: #FFFFFF;
  padding: 0 30rpx;
  position: sticky;
  top: 0;
  z-index: 100;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
}

.nav-bar-left {
  width: 60rpx;
  height: 60rpx;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.back-icon {
  width: 40rpx;
  height: 40rpx;
}

.nav-bar-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
}

.nav-bar-right {
  width: 60rpx;
}

/* 任务信息卡片 */
.task-info-card {
  background-color: #FFFFFF;
  padding: 30rpx;
  margin-bottom: 20rpx;
}

.task-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20rpx;
}

.task-type {
  display: flex;
  align-items: center;
}

.type-icon {
  width: 40rpx;
  height: 40rpx;
  margin-right: 10rpx;
}

.type-text {
  font-size: 28rpx;
  color: #333;
  font-weight: bold;
}

.task-status {
  font-size: 26rpx;
  font-weight: bold;
}

.task-title {
  font-size: 34rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 20rpx;
  line-height: 1.4;
}

.task-meta {
  display: flex;
  flex-direction: column;
  gap: 10rpx;
  margin-bottom: 20rpx;
}

.meta-item {
  display: flex;
  align-items: center;
}

.meta-label {
  font-size: 26rpx;
  color: #999;
  margin-right: 10rpx;
}

.meta-value {
  font-size: 26rpx;
  color: #666;
}

.price-section {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 20rpx;
  padding-top: 20rpx;
  border-top: 2rpx solid #F5F5F5;
}

.price-label {
  font-size: 28rpx;
  color: #333;
  font-weight: bold;
}

.price-value {
  font-size: 40rpx;
  color: #FF5151;
  font-weight: bold;
}

/* 详情部分 */
.detail-section, .requirements-section, .publisher-section {
  background-color: #FFFFFF;
  padding: 30rpx;
  margin-bottom: 20rpx;
}

.section-title {
  font-size: 30rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 20rpx;
  position: relative;
  padding-left: 20rpx;
}

.section-title::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 6rpx;
  height: 30rpx;
  background-color: #FF5151;
  border-radius: 3rpx;
}

.detail-content {
  padding: 10rpx 0;
}

.detail-text {
  font-size: 28rpx;
  color: #666;
  line-height: 1.6;
  white-space: pre-wrap;
}

.detail-images {
  display: flex;
  flex-wrap: wrap;
  gap: 20rpx;
  margin-top: 20rpx;
}

.detail-image {
  width: 220rpx;
  border-radius: 10rpx;
}

.task-tags {
  display: flex;
  flex-wrap: wrap;
  margin-top: 20rpx;
}

.tag {
  font-size: 22rpx;
  color: #FF5151;
  background-color: rgba(255, 81, 81, 0.1);
  padding: 6rpx 20rpx;
  border-radius: 20rpx;
  margin-right: 15rpx;
  margin-bottom: 15rpx;
}

/* 任务要求 */
.requirements-list {
  padding: 10rpx 0;
}

.requirement-item {
  display: flex;
  margin-bottom: 15rpx;
}

.requirement-num {
  width: 40rpx;
  height: 40rpx;
  background-color: #FF5151;
  color: #FFFFFF;
  font-size: 24rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 20rpx;
  margin-right: 15rpx;
}

.requirement-text {
  flex: 1;
  font-size: 28rpx;
  color: #666;
  line-height: 1.5;
}

/* 发布者信息 */
.publisher-info {
  display: flex;
  align-items: center;
  padding: 10rpx 0;
}

.publisher-avatar {
  width: 100rpx;
  height: 100rpx;
  border-radius: 50rpx;
  margin-right: 20rpx;
}

.publisher-details {
  flex: 1;
}

.publisher-name {
  font-size: 30rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 10rpx;
}

.publisher-rating {
  display: flex;
  align-items: center;
}

.rating-label {
  font-size: 26rpx;
  color: #999;
  margin-right: 10rpx;
}

.stars {
  display: flex;
}

.star-icon {
  width: 30rpx;
  height: 30rpx;
  margin-right: 5rpx;
}

/* 底部操作栏 */
.bottom-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100rpx;
  background-color: #FFFFFF;
  display: flex;
  align-items: center;
  padding: 0 30rpx;
  box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.05);
  z-index: 99;
}

.contact-btn {
  display: flex;
  align-items: center;
  padding: 0 20rpx;
  height: 70rpx;
  border-radius: 35rpx;
  background-color: #F5F5F5;
  margin-right: 20rpx;
}

.contact-icon {
  width: 40rpx;
  height: 40rpx;
  margin-right: 10rpx;
}

.contact-btn text {
  font-size: 26rpx;
  color: #666;
}

.action-btn {
  flex: 1;
  height: 70rpx;
  background-color: #FF5151;
  color: #FFFFFF;
  font-size: 28rpx;
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 35rpx;
}

.action-btn.disabled {
  background-color: #CCCCCC;
}
</style>